<!--河南星辰软件科技有限公司
@copyright Copyright (c) 2010~2022 All rights reserved.
-->
<template>
  <div class='app-container'>
    <el-form ref="form" :model="layout_item" :rules="rules" label-width="100px" id="mvcfm"> 仓库 <el-select @change="list_s_firm" v-model="layout_item.CMIDSEL">
        <el-option label="－－无－－" value='' />
        <el-option v-for="dict in s_firm" :key="dict.__code" :label="dict.__desc" :value="dict.__code"></el-option>
      </el-select>
      <div class="form-unit">
        <span class="mvc-title-left"> 布局图 </span>
      </div>
      <img id="imgmap" :src="layout['img']" border="0" align="absmiddle" usemap="#Map" />
      <map name="Map">
        <area v-for="(emt, status) in layout_item" :shape="emt['shape']" :coords="emt['coords']" :alt="emt['name']">
      </map>
      <DIV v-for="(emt, status) in layout_item" :style="emt.style">
        <a>
          <span style="color:red">{{emt['name']}}</span></a>
      </DIV>
    </el-form>
    <el-dialog :visible.sync="WarehouseGoodsVisible" append-to-body>
      <WarehouseGoods v-if="WarehouseGoodsVisible" ref="WarehouseGoods" :popparams="popparams"> </WarehouseGoods>
    </el-dialog>
  </div>
</template>
<script>
  import request from '@/utils/request'
  import WarehouseGoods from "@/views/psi/supplychainmana/WarehouseGoods";
  export default {
    name: 'WarehouseLayout',
    components: {
      WarehouseGoods,
    },
    props: ['popparams'],
    data() {
      return {
        WarehouseGoodsVisible: false,
        WarehouseGoodsValue: null,
        WarehouseGoodsDesc: null,
        vueparams: this.getVUEParams(""),
        layout_item: {},
        s_firm: [],
        loading: false,
        layout_item: [],
        rules: {}
      }
    },
    created() {
      this.getData();
    },
    updated() {},
    mounted() {},
    methods: {
      getData() {
        request({
          method: 'get',
          url: '/xcapi/VUEAction/psi/supplychainmana/WarehouseLayout/warehouseLayout?' + this.vueparams,
        }).then(data => {
          for (var k in data) {
            if (Array.isArray(data[k])) {
              this[k] = data[k];
            } else {
              $.extend(this[k], data[k]);
            }
          }
          let imgmap = document.getElementById("imgmap");
          if (this.layout.imgwidth) {
            imgmap.style.width = this.layout.imgwidth + 'px';
          }
          if (this.layout.imgheight) {
            imgmap.style.height = this.layout.imgheight + 'px';
          }
          let imgpos = this.mvc.getPos(document.getElementById("imgmap"));
          for (var o in this.layout_item) {
            let emt = this.layout_item[o];
            let coords = this.mvc.getCoords(emt['coords'], "rect", "from" + emt['shape']);
            let coordarr = coords.split(",");
            emt.style = {
              position: 'absolute',
              'text-align': 'center',
              'white-space': 'nowrap'
            };
            emt.style.left = (imgpos.x + parseInt(coordarr[0])) + 'px';
            emt.style.top = (imgpos.y + parseInt(coordarr[1])) + 'px';
            emt.style.width = (coordarr[2] - coordarr[0]) + 'px';
            emt.style.height = (coordarr[3] - coordarr[1]) + 'px';
            emt.style.lineHeight = emt.style.height;
          }
        })
      },
      list_s_firm(value) {
        if (this.$route.fullPath.indexOf("?") == -1) {
          this.$router.replace("/redirect" + this.$route.fullPath + "?CMIDSEL=" + value);
        } else if (this.$route.fullPath.indexOf("CMIDSEL=") == -1) {
          this.$router.replace("/redirect" + this.$route.fullPath + "&CMIDSEL=" + value);
        } else {
          this.gotoPage("/redirect/psi/supplychainmana/WarehouseLayout?" + this.vueparams, {
            CMIDSEL: value
          });
        }
      },
      popWarehouseGoods(params) {
        if (params != "") this.popparams = params + this.vueparams;
        this.WarehouseGoodsVisible = !this.WarehouseGoodsVisible;
      },
    },
  }
</script>
